<template>
    <div>
        <el-dialog title='评估记录' :visible.sync="isShow" @close="onClose" width="60%">
            <div class="common-view">
                <el-table :data="tableData" height="100%" class="hide-scrollbar"
                          :header-cell-style="headClass" :cell-style="rowClass">
                    <el-table-column prop="studentName" label="学生姓名">
                    </el-table-column>
                    <el-table-column prop="teacherName" label="评估人">
                    </el-table-column>
                    <el-table-column prop="nodeName" label="评估方法">
                    </el-table-column>
                    <el-table-column prop="commitTime" label="提交时间">
                    </el-table-column>
                    <el-table-column prop="percentage" label="操作">
                        <template slot-scope="scope">
                            <span class="examine-view">查看详情</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {getStudentRecordList} from '@/api/student.js'
    export default {
        props: ['isShowDialog','selectStudentId'],
        data() {
            return {
                studentId:this.selectStudentId,
                isDisabled: false,
                //   是否显示当前dialog
                isShow: this.isShowDialog,
                tableData: [],
            }
        },
        watch: {
            selectStudentId:{
                handler(newValue, oldValue) {
                    this.studentId = newValue;
                },
                deep: true
            }
        },
        created() {
            this.getEvaRecordList();
        },
        computed: {},
        methods: {
            getEvaRecordList(){
                console.log("selectStudentId",this.selectStudentId)
                getStudentRecordList({
                    studentId:this.selectStudentId
                }).then((res) => {
                    console.log(res)
                    if (res.code == 200){
                        this.tableData = res.data;
                    }
                });
            },
            //关闭弹窗清空表单
            onClose() {
                this.$emit('closeEvaRecord')
            },
            headClass() {
                //表头居中显示
                return "text-align:center;padding:15px";
            },
            rowClass() {
                //表格数据居中显示
                return "text-align:center;padding:15px;";
            },
        },
    }
</script>
<style lang="scss" scoped>

    .common-view {
        width: 100%;
        height: calc(60vh);
        border: 1px solid #e1e1e1;
        border-radius: 10px;
        padding: 5px;
    }

    /deep/ .el-dialog__wrapper {
        position: fixed;
        top: 10px;
    }

    /deep/ .el-dialog {
        -webkit-transform: none;
        transform: none;
        text-align: center;
        left: 0;
        position: relative;
        margin: 0 auto;
        border-radius: 15px;
    }

    /deep/ .el-dialog__title {
        line-height: 0.125rem;
        font-size: 0.09375rem;
        color: #303133;
        flex: auto;
        text-align: center;
        font-weight: bold;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: #909399;
        font-size: 0.15rem;
    }

    .examine-view {
        color: #2b2cff;
        border-bottom: 1px solid #2b2cff;
    }

    //隐藏指定 el-table 的水平滚动条
    .hide-scrollbar /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        background-color: transparent;
    }

    .hide-scrollbar /deep/ .el-table th.gutter, .el-table td.gutter {
        width: 0px !important;
        border-right-width: 0;
        border-bottom-width: 0;
        padding: 0;
    }

    /deep/ .el-dialog__body {
        padding: 1% 0.10417rem;
    }

    /* 隐藏表格底部横线 */
    /deep/ .el-table::after {
        height: 0 !important;
    }
</style>

